看蕭井陌b站直播第一集的收穫,附程式碼
阿新 • • 發佈:2019-02-01
var log = console.log.bind(console)
var imageFromPath = function(path) {
var img = new Image()
img.src = path
return img
}
var Paddle = function() {
var image = imageFromPath('paddle.png' )
//這個形式有點像C++中的struct
var o = {
image: image,
x: 100,
y: 500,
speed:15,
//此處最後一定要加個逗號(,),為了一致性;以後增刪都簡單;據說ie6會報錯
}
o.moveLeft = function() {
o.x -= o.speed
}
o.moveRight = function () {
o.x += o.speed
}
//函式引數之前不加引數型別,真的好不習慣
o.collide = function(ball) {
if(ball.y + ball.image.height > o.y) {
if(ball.x > o.x && ball.x < o.x + o.image.width) {
log('相撞' )
return true
}
}
return false
}
return o
}
var Ball = function() {
var image = imageFromPath('ball.png')
var o = {
image: image,
x: 100,
y: 200,
speedX:10,
speedY:10,
fired: false,
//此處最後一定要加個逗號(,),為了一致性;以後增刪都簡單;據說ie6會報錯
}
o.move = function() {
if (o.fired) {
log('move')
if (o.x < 0 || o.x > 800) {
o.speedX = -o.speedX
}
if (o.y < 0 || o.y > 600) {
o.speedY = -o.speedY
}
//move
o.x += o.speedX
o.y += o.speedY
}
}
o.fire = function() {
o.fired = true
}
return o
}
var GuaGame = function() {
var g = {
actions: {},
keydowns: {},
}
var canvas = document.querySelector('#id-canvas')
var context = canvas.getContext('2d')
g.canvas = canvas
g.context = context
//draw
g.drawImage = function(guaImage) {
g.context.drawImage(guaImage.image, guaImage.x, guaImage.y)
}
//events
window.addEventListener('keydown',function(event){
log('keydown')
g.keydowns[event.key] = true
})
window.addEventListener('keyup',function(event){
g.keydowns[event.key] = false
})
//
g.registerAction = function(key, callback) {
g.actions[key] = callback
}
//timer:設定每秒重新整理次數,即fps
setInterval(function(){
//events
var actions = Object.keys(g.actions)
for (var i = 0;i < actions.length; i++) {
var key = actions[i]
if(g.keydowns[key]) {
//如果按鍵被按下,呼叫註冊的action
g.actions[key]()
}
}
//update
g.update()
//clear
context.clearRect(0, 0, canvas.width, canvas.height)
//draw
g.draw()
},1000/30)
return g
}
var __main = function() {
var game = GuaGame()
var paddle = Paddle()
var ball = Ball()
game.registerAction('a',function(){
paddle.moveLeft()
})
game.registerAction('d',function(){
paddle.moveRight()
})
game.registerAction('f',function(){
ball.fire()
})
game.update = function() {
ball.move()
//判斷相撞
if(paddle.collide(ball)) {
//這裡應該呼叫一個ball.反彈()來實現;
ball.speedY *= -1
}
}
game.draw = function() {
//draw
game.drawImage(paddle)
game.drawImage(ball)
}
}
__main()