javascript into html - Githubissues

CodyWorth commented 6 years ago

I am trying to create a javascript game because it can somehow link to html. So far I tried making the canvas in java script pop up but i only saw a white screen. I just started learning html and atm I want all my code to be in java and just use html to place it on the webpage. here my html: `<!doctype html>

Space Invaders ` i'm trying to link this page to my js here my js `function setup(){ createCanvas(400,400); } function draw(){ background(0); }` i'm wanting a 400 by 400 screen to appear on the web page with the background in the square being 0. Can someone tell me why this not working?

JohnyDL commented 6 years ago

Canvas isn't native JS it's part of P5 you need to include that library in order to use its functions

ctrembla commented 6 years ago

How would I do it without the p5 library?

warmachinesocial commented 6 years ago

Include the p5 library in the index html

JohnyDL commented 6 years ago

Um you'd probably meet to build your own library since interacting with web pages with JS is designed for forms not well a huge amount of stuff we now use it for

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

Comes from https://p5js.org/get-started/ and most of Dan's JS work uses it even if it's not explicit cause he's heavily involved with processing and p5 see https://hello.p5js.org/ to see

ctrembla commented 6 years ago

so it should be something like this?

`<!doctype html>

Space Invaders ` btw ty for help

warmachinesocial commented 6 years ago

Yes

On Sat, May 19, 2018, 9:50 PM ctrembla, notifications@github.com wrote:

so it should be something like this?

`<!doctype html>
Space Invaders ` — You are receiving this because you commented. Reply to this email directly, view it on GitHub , or mute the thread .

ctrembla commented 6 years ago

i'm still only getting a white screen. I run the js I get the code appearing on the webpage. I run the html I get a white page.

AnthonyTonev commented 6 years ago

Use background(0) inside draw() to change the color of the background to black. Or background(0,255,0) to make it green.

ctrembla commented 6 years ago

The problem was </script> <script source = "spaceInvaders.js"> </script> was suppose to be </script> <script src = "spaceInvaders.js"> </script> https://github.com/CodingTrain/Rainbow-Topics/issues/977#issuecomment-390453751

Californ1a commented 5 years ago

@JohnyDL commented on May 19, 2018, 9:42 PM EDT:

Canvas isn't native JS it's part of P5 you need to include that library in order to use its functions

@JohnyDL commented on May 19, 2018, 10:43 PM EDT:

Um you'd probably meet to build your own library since interacting with web pages with JS is designed for forms not well a huge amount of stuff we now use it for

There is actually native canvas in HTML5. It's essentially what p5 is manipulating for you. Definitely wouldn't recommend a beginner to use native canvas - p5 is much friendlier because it obfuscates a lot of stuff, but this kind of thing is possible without a library.

This example (running) just creates a small 400x400 canvas with a red cube moving from left to right along the x-axis in the middle, and then from right to left when it hits the edge:

// sketch.js
const canvas = document.createElement("canvas"); //create canvas element
const ctx = canvas.getContext("2d"); //create 2d rendering

canvas.id = "CursorLayer"; //give it an id
canvas.width = 400;
canvas.height = 400;

const cube = { //create a cube with x&y position, width, and height
    pos: {
        x: 0,
        y: 150
    },
    width: 100,
    height: 100
};
let moveRight = true;

window.onload = (() => { //after window finishes loading
    setup();
});

function setup() { //mimick p5, could go directly in window.onload
    const body = document.getElementsByTagName("body")[0]; //grab the document body
    body.appendChild(canvas); //add canvas to body

    requestAnimationFrame(draw); //get first frame of animation ready, calls draw()
}

function draw() {
    ctx.fillStyle = "rgb(102,102,102)"; //set background color
    ctx.fillRect(0, 0, canvas.width, canvas.height); //create background box filling canvas

    if (cube.pos.x <= canvas.width - cube.width && moveRight) { //if cube is still within canvas
        cube.pos.x++; //+1 to x
    } else {
        cube.pos.x--; //otherwise (when cube hits right edge of canvas) -1 to x
        moveRight = (cube.pos.x > 0) ? false : true; //if x value <=0, go back to moving right
    }

    ctx.fillStyle = "rgb(255, 0, 0)"; //fill color for cube
    ctx.setTransform(1, 0, 0, 1, cube.pos.x, cube.pos.y); //move cube to pos.x, pos.y (+/-1 on x)
    ctx.fillRect(0, 0, cube.width, cube.height); //create cube

    requestAnimationFrame(draw); //get next frame ready
}

Definitely would recommed using p5 instead of native canvas. Native canvas is much more difficult to work with, especially animation and interaction.

CodingTrain / Suggestion-Box

javascript into html #977