Last active
December 29, 2017 17:58
-
-
Save chaz4/643da39b267e409b2caee271dc0ec6d2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="UTF-8" /> | |
<title>Collision 2</title> | |
</head> | |
<body> | |
<canvas id="maincv"></canvas> | |
<script> | |
const PLAYER_SPEED = 3; | |
const PLAYER_JUMP = 6; | |
const PLAYER_GRAVITY= 0.3; | |
const PLAYER_FALL = 10; | |
window.addEventListener('load',init); | |
document.onkeydown = function(e){ | |
if(e.keyCode==37)keybuff.left = true; | |
if(e.keyCode==39)keybuff.right = true; | |
if(e.keyCode==32)keybuff.space = true; | |
} | |
document.onkeyup = function(e){ | |
if(e.keyCode==37)keybuff.left = false; | |
if(e.keyCode==39)keybuff.right = false; | |
if(e.keyCode==32)keybuff.space = false; | |
} | |
class Sprite { | |
constructor(x,y,w,h,color){ | |
this.x = x; | |
this.y = y; | |
this.w = w; | |
this.h = h; | |
this.color = color; | |
this.vsp = 0; | |
} | |
update(){ | |
let mx=0,jump=0; | |
//キー入力取得 | |
if(keybuff.left)mx=-1; | |
if(keybuff.right)mx=1; | |
if(keybuff.space)jump=1; | |
let hsp = mx * PLAYER_SPEED; | |
//地面に接地しているか | |
let isGround = false; | |
if(this.hitTest(this.x, this.y+1, blockGroup)) isGround = true; | |
//重力を加える | |
if(this.vsp < PLAYER_FALL) this.vsp += PLAYER_GRAVITY; | |
//ジャンプ | |
if(jump && isGround) this.vsp = -PLAYER_JUMP; | |
//水平方向の衝突 | |
let sign = getSign(hsp); | |
if(this.hitTest(this.x+hsp, this.y, blockGroup)){ | |
while(!this.hitTest(this.x+sign, this.y, blockGroup)){ | |
this.x += sign; | |
} | |
hsp = 0; | |
} | |
this.x += hsp; | |
//垂直方向の衝突 | |
sign = getSign(this.vsp); | |
if(this.hitTest(this.x, this.y+this.vsp, blockGroup)){ | |
while(!this.hitTest(this.x, this.y+sign, blockGroup)){ | |
this.y += sign; | |
} | |
this.vsp = 0; | |
} | |
this.y += this.vsp; | |
} | |
draw(){ | |
ctx.fillStyle = this.color; | |
ctx.fillRect(this.x-this.w/2, this.y-this.h/2, this.w, this.h); | |
} | |
hitTest(ax,ay,group) { | |
for (let sp in group) { | |
let opponent = group[sp]; | |
let sx = Math.abs(ax - opponent.x); | |
let sy = Math.abs(ay - opponent.y); | |
let sw = this.w/2 + opponent.w/2; | |
let sh = this.h/2 + opponent.h/2; | |
//ヒットしている時 | |
if ( (sx < sw) && (sy < sh) ) { | |
return true; | |
} | |
} | |
return false; | |
} | |
} | |
let cv,ctx; | |
let x=50,y=50; | |
let keybuff = {left:false, right:false, up:false, down:false}; | |
let blockGroup = []; | |
let player = new Sprite(50,200,30,40,'blue'); | |
blockGroup.push(new Sprite(280,150,50,50,'green')); | |
blockGroup.push(new Sprite(150,200,50,50,'green')); | |
blockGroup.push(new Sprite(200,250,400,40,'brown')); | |
function init(){ | |
cv = document.getElementById('maincv'); | |
ctx = cv.getContext('2d'); | |
cv.width = 400; | |
cv.height = 300; | |
requestAnimationFrame(update); | |
} | |
function update(){ | |
requestAnimationFrame(update); | |
player.update(); | |
render(); | |
} | |
function render(){ | |
ctx.fillStyle = "gray"; | |
ctx.fillRect(0,0,cv.width,cv.height); | |
for(let sp in blockGroup){ | |
blockGroup[sp].draw(); | |
} | |
player.draw(); | |
} | |
function getSign(val){ | |
if(val < 0){ | |
return -1; | |
}else if(val > 0){ | |
return 1; | |
}else{ | |
return 0; | |
} | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment