Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

html_canvas #5

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

html_canvas #5

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 124 additions & 111 deletions js/game.js
100644 → 100755
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,130 +1,143 @@
// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
//create a canvas
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
canvas.width=512;
canvas.height=480;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
bgReady = true;
};
bgImage.src = "images/background.png";

// Hero image
var heroReady = false;
var heroImage = new Image();
heroImage.onload = function () {
heroReady = true;
};
heroImage.src = "images/hero.png";

// Monster image
var monsterReady = false;
var monsterImage = new Image();
monsterImage.onload = function () {
monsterReady = true;
};
monsterImage.src = "images/monster.png";

// Game objects
var hero = {
speed: 256 // movement in pixels per second
};
var monster = {};
var monstersCaught = 0;

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
}, false);

// Reset the game when the player catches a monster
var reset = function () {
hero.x = canvas.width / 2;
hero.y = canvas.height / 2;

// Throw the monster somewhere on the screen randomly
monster.x = 32 + (Math.random() * (canvas.width - 64));
monster.y = 32 + (Math.random() * (canvas.height - 64));
};

// Update game objects
var update = function (modifier) {
if (38 in keysDown) { // Player holding up
hero.y -= hero.speed * modifier;
//background image
var bgReady=false;
var bgImg=new Image();
bgImg.onload=function(){
bgReady=true;
}
bgImg.src="images/background.png";

//hero image
var heroReady=false;
var heroImg=new Image();
heroImg.onload=function(){
heroReady=true;
}
heroImg.src="images/hero.png";

//monster image
var monsterReady=false;
var monsterImg=new Image();
monsterImg.onload=function(){
monsterReady=true;
}
monsterImg.src="images/monster.png";

//game object
var hero={
speed:256
}
var monster={};
var monstersCatch=0;
var keydown={};

addEventListener("keydown",function(e){
keydown[e.keyCode]=true;
},false);

addEventListener("keyup",function(e){
delete keydown[e.keyCode];
},false);

//这块有所改变使英雄重置后位置不变
hero.x=canvas.width/2;
hero.y=canvas.height/2;
var reset=function(){
hero.x=hero.x;
hero.y= hero.y;
monster.x=32+(Math.random()*(canvas.width-64));
monster.y=32+(Math.random()*(canvas.height-64));

}
//update函数增加了限制，使hero保持的游戏图案里
var update=function(modifier){
if(38 in keydown){
hero.y -=hero.speed*modifier;
}
if (40 in keysDown) { // Player holding down
hero.y += hero.speed * modifier;
if (hero.y<32) {
hero.y=32;
};
if(40 in keydown) {
hero.y +=hero.speed*modifier;
};
if(hero.y>canvas.height-64){
hero.y=canvas.height-64;
}
if (37 in keysDown) { // Player holding left
hero.x -= hero.speed * modifier;
if(37 in keydown) {
hero.x -=hero.speed*modifier;
}
if (39 in keysDown) { // Player holding right
hero.x += hero.speed * modifier;
if(hero.x<32){
hero.x=32;
}
if(39 in keydown){
hero.x +=hero.speed*modifier;
}
if (hero.x>canvas.width-64) {
hero.x=canvas.width-64;
};

// Are they touching?
//are you touch
if (
hero.x <= (monster.x + 32)
&& monster.x <= (hero.x + 32)
&& hero.y <= (monster.y + 32)
&& monster.y <= (hero.y + 32)
) {
++monstersCaught;
reset();
}
};

// Draw everything
var render = function () {
hero.x<=(monster.x+32)
&&monster.x<=(hero.x+32)
&&hero.y<=(monster.y+32)
&&monster.y<=(hero.y+32)
) {

++monstersCatch;
reset();
};

}

var render=function(){
if (bgReady) {
ctx.drawImage(bgImage, 0, 0);
ctx.drawImage(bgImg,0,0)
}

if (heroReady) {
ctx.drawImage(heroImage, hero.x, hero.y);
if (heroReady){
ctx.drawImage(heroImg,hero.x,hero.y);
}

if (monsterReady) {
ctx.drawImage(monsterImage, monster.x, monster.y);
if (monster) {
ctx.drawImage(monsterImg,monster.x,monster.y);
}

// Score
ctx.fillStyle = "rgb(250, 250, 250)";
//score
ctx.fillstyle="rgb(250,250,250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Goblins caught: " + monstersCaught, 32, 32);
};
ctx.textAlign="left";
ctx.textBaseline="top";
ctx.fillText("Goblins caught:"+monstersCatch,32,32);
}

var main=function(){
var now=Date.now();
var delta=now-then;
update(delta/1000);
render();
then=now;
requestAnimationFrame(main);
}

//requestAnimationFrame
var w=window;
requestAnimationFrame=w.requestAnimationFrame||w.webkitRequestAnimationFrame||w.msRequestAnimationFrame||w.mozRequestAnimationFrame;
var then=Date.now();
reset();
main();







// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;

// Request to do this again ASAP
requestAnimationFrame(main);
};

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

// Let's play this game!
var then = Date.now();
reset();
main();