web games

ping pong and mii game

by Daniel Hall

HTML

<DOCTYPE html>
<html>
<style>canvas {
    background: black;
}

body {
  background-color: Orange;
}
#background {
  width: 90%;
  height: 160%;
  left: 10%;
  position: absolute;
}</style>
<script>ctx=c.getContext('2d')
ctx.fillStyle='#fff'
ctx.shadowColor='white'

init=function(){
    retic=[[20,20],[20,20]]
    retic2=[[260,20],[20,20]]
    ball=[[100,50],[5,5]]
    bs=[5,Math.random()*10]
    mww=25
    midwall=[[c.width/2-(Math.floor(mww/2)),5],[mww,c.height-10]]
    map=[]
    fps=24
    s1=0
    s2=0
}
init()
onkeydown=onkeyup=function(e){
    map[e.keyCode]=e.type=='keydown'
}
draw=function(o){
    ctx.fillRect(o[0][0],o[0][1],o[1][0],o[1][1])
}
checkMove=function(){
    var W=87,A=65,S=83,D=68
    if(map[37]){retic2[0][0]-=5}else if(map[39]){retic2[0][0]+=5}
    if(map[38]){retic2[0][1]-=5}else if(map[40]){retic2[0][1]+=5}
    if(map[W]){retic[0][1]-=5}else if(map[S]){retic[0][1]+=5}
    if(map[A]){retic[0][0]-=5}else if(map[D]){retic[0][0]+=5}
    ball[0][0]+=bs[0]
    ball[0][1]+=bs[1]
}
checkBoundary=function(){
    if(retic2[0][0]<midwall[0][0]+mww-5){retic2[0][0]+=5}
    if(retic2[0][0]>c.width-20){retic2[0][0]-=5}
    if(retic2[0][1]<0){retic2[0][1]+=5}
    if(retic2[0][1]>c.height-20){retic2[0][1]-=5}
    if(retic[0][0]<0){retic[0][0]+=5}
    if(retic[0][0]>midwall[0][0]-20+5){retic[0][0]-=5}
    if(retic[0][1]<0){retic[0][1]+=5}
    if(retic[0][1]>c.height-20){retic[0][1]-=5}
    var cpad=false,b=ball[0],r=retic[0],r2=retic2[0]
    //cpad=Collide PADdle
    if(b[0]<r[0]+25&&b[0]>r[0]&&b[1]<r[1]+20&&b[1]>r[1]){
        cpad=true
    }
    if(b[0]>r2[0]-5&&b[0]<r2[0]+20&&b[1]<r2[1]+20&&b[1]>r2[1]){
        cpad=true
    }
    if(ball[0][0]<0){s2++}else if(ball[0][0]>c.width-5){s1++}
    if(ball[0][0]>c.width-5||ball[0][0]<0||cpad){bs[0]=-bs[0]}
    if(ball[0][1]>c.height-5||ball[0][1]<0){bs[1]=-bs[1]}
    score.innerHTML=''
    for(var i=0;i<15;i++){score.innerHTML+='&nbsp;'}
    score.innerHTML+=s1
    for(var...

CSS

canvas {
    background: black;
}

body {
  background-color: Orange;
}
#background {
  width: 90%;
  height: 160%;
  left: 10%;
  position: absolute;
}

JavaScript

ctx=c.getContext('2d')
ctx.fillStyle='#fff'
ctx.shadowColor='white'

init=function(){
    retic=[[20,20],[20,20]]
    retic2=[[260,20],[20,20]]
    ball=[[100,50],[5,5]]
    bs=[5,Math.random()*10]
    mww=25
    midwall=[[c.width/2-(Math.floor(mww/2)),5],[mww,c.height-10]]
    map=[]
    fps=24
    s1=0
    s2=0
}
init()
onkeydown=onkeyup=function(e){
    map[e.keyCode]=e.type=='keydown'
}
draw=function(o){
    ctx.fillRect(o[0][0],o[0][1],o[1][0],o[1][1])
}
checkMove=function(){
    var W=87,A=65,S=83,D=68
    if(map[37]){retic2[0][0]-=5}else if(map[39]){retic2[0][0]+=5}
    if(map[38]){retic2[0][1]-=5}else if(map[40]){retic2[0][1]+=5}
    if(map[W]){retic[0][1]-=5}else if(map[S]){retic[0][1]+=5}
    if(map[A]){retic[0][0]-=5}else if(map[D]){retic[0][0]+=5}
    ball[0][0]+=bs[0]
    ball[0][1]+=bs[1]
}
checkBoundary=function(){
    if(retic2[0][0]<midwall[0][0]+mww-5){retic2[0][0]+=5}
    if(retic2[0][0]>c.width-20){retic2[0][0]-=5}
    if(retic2[0][1]<0){retic2[0][1]+=5}
    if(retic2[0][1]>c.height-20){retic2[0][1]-=5}
    if(retic[0][0]<0){retic[0][0]+=5}
    if(retic[0][0]>midwall[0][0]-20+5){retic[0][0]-=5}
    if(retic[0][1]<0){retic[0][1]+=5}
    if(retic[0][1]>c.height-20){retic[0][1]-=5}
    var cpad=false,b=ball[0],r=retic[0],r2=retic2[0]
    //cpad=Collide PADdle
    if(b[0]<r[0]+25&&b[0]>r[0]&&b[1]<r[1]+20&&b[1]>r[1]){
        cpad=true
    }
    if(b[0]>r2[0]-5&&b[0]<r2[0]+20&&b[1]<r2[1]+20&&b[1]>r2[1]){
        cpad=true
    }
    if(ball[0][0]<0){s2++}else if(ball[0][0]>c.width-5){s1++}
    if(ball[0][0]>c.width-5||ball[0][0]<0||cpad){bs[0]=-bs[0]}
    if(ball[0][1]>c.height-5||ball[0][1]<0){bs[1]=-bs[1]}
    score.innerHTML=''
    for(var i=0;i<15;i++){score.innerHTML+='&nbsp;'}
    score.innerHTML+=s1
    for(var i=0;i<40;i++){score.innerHTML+='&nbsp;'}
    score.innerHTML+=s2
}
UPDATE=function(){
    var R=82;if(map[R]){init()}
    checkMove()
    checkBoundary()
    ctx.clearRect(0,0,c.width,c.height)
    draw(ball)
    draw(retic)
   ...