<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>game</title>
<link rel="stylesheet" href="css/css.min.css">
<script src="js/vue.js" charset="utf-8"></script>
</head>
<body>
<div id="gembox" >
<div id="game">
<div id="paddle" :style="{
left:paddle.x+'px',
bottom:paddle.y+'px',
width:paddle.w+'px',
height:paddle.h+'px',
}"></div>
<div id="ball" :style="{
left:ball.x+'px',
bottom:ball.y+'px',
width:ball.size+'px',
height:ball.size+'px'
}"></div>
<div class="brick" v-for="brick in brickclass[state.level]" :style="{
left:brick.x+'px',
bottom:brick.y+'px',
}">{{brick.life?brick.life:1}}</div>
<div id="result" v-show="result.show">
<p>{{result.message[result.msgid][0]}}</p>
<button @click="resultGame()">{{result.message[result.msgid][1]}}</button>
</div>
<span id="score">分数：{{state.score}}</span>
<div id="set" @click="state.setting=!state.setting"></div>
</div>
<div id="control" v-show="state.setting">
<p>
<span>运动：</span>
<input type="button" :value='state.toggle?"暂停":"开始"' @click="state.toggle=!state.toggle"></input>
</p>
<p>
<span>速度：{{ball.fps}}</span>
<input type="range" min="5" max="100" :value="ball.fps" v-model.number="ball.fps"/>
<span class="text" v-show="ball.fps>80">(小伙子怕是要作死啊)</span>
</p>
<p>
<span>挡板：{{paddle.w}}</span>
<input type="range" min="50" max="500" :value="paddle.w" v-model.number="paddle.w" />
<span class="text" v-show="paddle.w>400">(你这是在开挂你知道吗)</span>
</p>
<div class="level">
关卡：
<span v-for="(level,index) in brickclass">
<input type="radio" :value="index" v-model="state.level">
<label>{{index+1}}</label>
</span>
</div>
</div>
</div>
<script type="text/javascript">
const log = console.log.bind(console)
const BreaktheBricks = new Vue({
el:"#gembox",
data:{
state:{
toggle:false,
clear:false,
setting:true,
level:0,
score:0
},
paddle:{
x:200,
y:20,
w:100,
h:10,
speed:30
},
ball:{
x:250,
y:35,
size:15,
speed:5,
fps:20
},
brickclass:[
[{x:350,y:360}],
[{x:50,y:360,life:2}],
[{x:50,y:360,life:2},{x:150,y:360,life:2},{x:250,y:360,life:2},{x:350,y:360,life:2}]
],
result:{
show:true,
msgid:0,
message:[
["确定要玩这款辣鸡游戏?","开始"],
["恭喜你闯成功","下一关"],
["辣鸡游戏都玩不过","我不服"],
["恭喜你通关完成","最强荣誉"]
]
}
},
methods:{
resultGame(){
let g = this,
i = g.result.msgid,
init = function(){
g.result.show = false
g.ball.x = 250
g.ball.y = 35
g.paddle.x = 200
g.state.clear = false
g.state.toggle = true
g.updataGame()
}
if (i == 0 ) {
document.onkeydown = function(e){
g.paddleGame(e.key)
}
}
if(i == 1){
g.state.level++
}
log('init')
init()
},
paddleGame(key){
let g = this,
o = this.paddle
let move = function(n){
if(n < 0){n = 0}
if(n > 500 - o.w){
n = 500 - o.w
}
o.x = n
}
if (key == "ArrowLeft") {
move(o.x - o.speed)
}
if (key == "ArrowRight") {
move(o.x + o.speed)
}
},
updataGame(){
let g = this
o = g.ball,
p = g.paddle,
b = g.brickclass[g.state.level]
x = o.speed,
y = o.speed,
updata = function(){
if( g.state.toggle ){
let 反弹 = function(){
y *= -1
Math.floor(Math.random()*2) == 0 ? x *= -1:x
}
if (o.x < 0 || o.x > 500 - o.size) {
x *= -1
}
if (o.y > 400 - o.size) {
y *= -1
}
if (o.y < 0 ) {
g.state.toggle = false
g.state.clear = true
g.result.show = true
g.result.msgid = 2
}
if(g.rectIntersect(o,p)){
反弹()
}
for (let i = 0; i < b.length; i++) {
if(!b[i].life){ b[i].life = 1 }
b[i].w = 50
b[i].h = 20
if(g.rectIntersect(o,b[i])){
反弹()
g.brickGame(b,b[i],i)
}
}
o.x += x
o.y += y
}
let updatatimer = setTimeout(updata,1000/o.fps)
if(g.state.clear){
log('clear')
clearTimeout(updatatimer)
}
}
updata()
},
brickGame(b,o,i){
let g = this
o.life--
if(o.life == 0){
b.splice(i,1)
g.state.score +=10
if(b.length == 0){
g.result.msgid = 1
g.state.toggle = false
g.state.clear = true
g.result.show = true
}
}
},
rectIntersect(a,b){
if (a.y + a.size > b.y && a.y < b.y + b.h) {
if (a.x + a.size > b.x && a.x < b.x + b.w) {
return true
}
}
return false
}
},
watch:{
paddle:{
handler:function(a,b){
log(a,b)
if(a.w + a.x > 500){
a.x -= a.w + a.x - 500
}
},
deep: true
}
}
})
</script>
</pody>
</html>
转载请注明原文地址: https://www.6miu.com/read-34198.html
