-
Notifications
You must be signed in to change notification settings - Fork 0
/
example7.html
96 lines (83 loc) · 2.86 KB
/
example7.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<script src="../jaws-dynamic.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
<title>DOMtest</title>
</head>
<body>
<br /><br /><br />
<br /><br /><br />
<div id="canvas"></div>
<br /><div id="jaws-log"></div>
</body>
<script>
/*
*
* PlayState is the actual game play. We switch to it once user choses "Start game"
*
*/
var fps = document.getElementById("fps")
function PlayState() {
var player
var bullets = new jaws.SpriteList()
this.setup = function() {
player = new jaws.Sprite({image: "plane.png", x:1, y:1, anchor: "center"})
player.can_fire = true
jaws.preventDefaultKeys(["up", "down", "left", "right", "space"])
}
this.update = function() {
if(jaws.pressed("left")) { player.x -= 2; player.flipped = true }
if(jaws.pressed("right")) { player.x += 2; player.flipped = false }
if(jaws.pressed("up")) { player.y -= 2 }
if(jaws.pressed("down")) { player.y += 2 }
if(jaws.pressed("space")) {
if(player.can_fire) {
var vx = player.flipped ? -10 : 10
bullets.push( new Bullet({x: player.toRect().right, y: player.toRect().bottom-5, vx: vx}) )
player.can_fire = false
setTimeout(function() { player.can_fire = true }, 100)
}
}
forceInsideCanvas(player)
bullets.forEach( function(item, index, array) {
if(isOutsideCanvas(item)) {
jaws.dom.removeChild(item.div)
array.splice(index,1)
}
});
bullets.update()
jaws.log("bullets: " + bullets.length + " fps: " + jaws.gameloop.fps)
}
this.draw = function() {
//fps.innerHTML = jaws.gameloop.fps
player.draw()
bullets.draw()
}
/* Simular to example1 but now we're using jaws properties to get widthteElement('div'); and height of canvas instead */
/* This mainly since we let jaws handle the canvas now */
function isOutsideCanvas(item) {
return (item.x < 0 || item.y < 0 || item.x > jaws.width || item.y > jaws.height)
}
function forceInsideCanvas(item) {
if(item.x < 0) { item.x = 0 }
if(item.toRect().right > jaws.width) { item.x = jaws.width - item.width }
if(item.y < 0) { item.y = 0 }
if(item.toRect().bottom > jaws.height) { item.y = jaws.height - item.height }
}
function Bullet(options) {
this.vx = options.vx
options.setImage( "bullet.png" )
jaws.Sprite.call(this, options)
this.update = function() { this.x += this.vx }
}
Bullet.prototype = jaws.Sprite.prototype
}
jaws.onload = function() {
// jaws.unpack() // Make (among others) Sprite global
jaws.assets.add("plane.png")
jaws.assets.add("bullet.png")
jaws.start(PlayState)
}
</script>
</html>