dchen4/Klondike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

weird commit

Browse Source
This commit is contained in:
chendylan680@gmail.com
2024-09-26 21:56:38 +10:00
parent 5527e349b2
commit dd936ccb35
2 changed files with 158 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
cardgame.html
View File

@@ -17,8 +17,6 @@
}
</style>
<title>Solitaire - Klondike - Yurun Chen</title>
<!-- <link rel="stylesheet" href="style.css"> -->
<script type="module">import { Canvg } from 'https://cdn.skypack.dev/canvg@^4.0.0';</script>
<script type="text/javascript" defer src="card-v2.js"></script>
<script type="text/javascript" defer src="deck-v2.js"></script>
<!-- main game javascript file-->
@@ -28,8 +26,7 @@
</head>
<body>
<canvas id="canvas" width="400" height="300"> </canvas>
<input id="clickMe" type="button" value="DrawStock" onclick="game_instance.draw_stock();" />
<input id="clickMe" type="button" value="DrawStock" onclick="game_instance.reset();" />]\
<input id="clickMe" type="button" value="Reset" onclick="game_instance.reset();" />
<h1 id="coord"></h1>
</body>
</html>

225
game.js
View File

@@ -12,17 +12,21 @@ class Stack {
}
pop() {
//Check that the stack is not empty
//Remove the last element from the stack and return it
var card = this.#items.pop();
console.log(this.#items)
var card = this.#items.shift();
console.log(card, this.#items)
return card
}
peek() {
//Check that the stack is not empty
//Return the last element from the stack without removing it
return this.#items[this.#items.length - 1];
return this.#items[this.#items.length-1];
}
peek_at(n){
return this.#items[n];
}
isEmpty() {
@@ -52,7 +56,7 @@ class Stack {
}
unshift(card){
console.log(card);
(card);
this.#items.unshift(card);
}
}
@@ -144,7 +148,7 @@ class View {
try {
this.#element_list[i].render(ctx);
} catch (error) {
console.log(this.#element_list[i].render);
(this.#element_list[i].render);
console.error(this.#element_list[i]);
// Expected output: ReferenceError: nonExistentFunction is not defined
// (Note: the exact output may be browser-dependent)
@@ -316,6 +320,7 @@ class StackView extends View{
pop_element(n){
super.pop_element(n);
}
}
//view for the stock stack
@@ -362,14 +367,12 @@ class FoundationView extends View {
}
on_empty(){
//obviously replace it with the rectangle
//always draw 1
substack(){
return 0
}
//when the card is placed on a particular foundation, show it!
on_put(){
}
draw() {
return this.stack.pop();
@@ -381,7 +384,7 @@ class FoundationView extends View {
draw() {
super.pop_element(1);
console.log(this);
(this);
//if the the stack is empty, place the placeholder
var tmp_elist = super.get_element_list();
//if there is still cards
@@ -392,7 +395,7 @@ class FoundationView extends View {
super.update_element([new Placeholder(this.x,this.y,210,300)])
this.resize(this.scale);
}
console.log(super.get_element_list())
(super.get_element_list())
return this.stack.pop();
}
@@ -404,12 +407,12 @@ class FoundationView extends View {
is_legal(card){
var legal = false;
//if foundation empty
console.log(this.peek())
(this.peek())
if (this.stack.size()==0){
if (card.getValue() == 1){
legal = true
}
} else if (card.getValue() == this.peek()[0].getValue()+1 && card.getSuit() == this.peek()[0].getSuit()){
} else if (card.getValue() == this.peek().getValue()+1 && card.getSuit() == this.peek().getSuit()){
legal = true
}
return legal;
@@ -420,17 +423,24 @@ class FoundationView extends View {
this.add_element(card);
}
add_element(cards){
add_element(card){
var tmp_elist = super.get_element_list();
var last_element = tmp_elist[tmp_elist.length-1]
console.log(last_element)
for (var i=0; i<cards.length; i++){
tmp_elist.push(new CardView(true, last_element.ox, last_element.oy, cards[i], 210, 300))
}
tmp_elist.push(new CardView(true, last_element.ox, last_element.oy, card, 210, 300))
super.update_element(tmp_elist);
this.resize(this.scale);
console.log(super.get_element_list())
(super.get_element_list())
}
is_won(){
var won = false;
//if the stack is full and the last card is a king, because it is imposssible to make illegal moves, it is therefore sorted
if (this.stack.size()==13 && this.stack.peek().getValue() == 13){
won = true
}
console.log(won)
return won
}
}
@@ -447,7 +457,7 @@ class WasteView extends StackView{
}
add(card, scale){
console.log(card, this.list.length);
(card, this.list.length);
//if the waste pile isn't full'
if (this.list.length < 3){
this.list.push(card);
@@ -479,14 +489,14 @@ class WasteView extends StackView{
draw() {
super.pop_element(1);
console.log(this);
(this);
var tmp_elist = super.get_element_list();
//if there is still cards
if (tmp_elist.length != 0){
tmp_elist[tmp_elist.length-1].reveal();
super.update_element(tmp_elist);
}
console.log(super.get_element_list())
(super.get_element_list())
return this.list.pop();
}
@@ -498,6 +508,19 @@ class WasteView extends StackView{
is_legal(){
return false
}
is_won(){
var won = false;
if (this.list.length==0){
won = true
}
return won
}
//always draw 1
substack(){
return 0
}
}
//view for the vertical columns
@@ -505,25 +528,30 @@ class ColumnView extends StackView {
constructor(stack, element_list, ox, oy, odx, ody, i){
super(1, false, element_list, ox, oy, odx, ody, i);
this.stack=stack;
console.log(this.stack)
this.empty = false;
console.log(super.array_parser(this.stack.to_array()));
console.log(element_list)
// (super.array_parser(this.stack.to_array()));
}
draw() {
var tmp_elist = super.get_element_list();
var last_element = tmp_elist[tmp_elist.length-1];
console.log(tmp_elist)
super.pop_element(1);
//if there is still cards
console.log(last_element)
(last_element)
if (tmp_elist.length != 0){
tmp_elist[tmp_elist.length-1].reveal();
super.update_element(tmp_elist);
} else {
var last_element = tmp_elist[tmp_elist.length-1]
super.update_element([new Placeholder(last_element.ox, last_element.oy, 180, 270)]);
this.resize(this.scale);
this.empty = true;
console.log(this.stack)
}
console.log(super.get_element_list())
(super.get_element_list())
return this.stack.pop();
}
@@ -549,24 +577,43 @@ class ColumnView extends StackView {
this.add_element(card);
}
peek_at(n){
return this.stack.peek_at(n);
}
//https://stackoverflow.com/questions/15997879/get-the-index-of-the-object-inside-an-array-matching-a-condition I used the example in this answer to match the card object via value, since there's only one value in each column possible
substack(card){
(card)
var tmp_lst = this.stack.to_array().reverse();
var index = tmp_lst.findIndex(x => x.getValue() ===card.getValue());
(index)
return index
}
add_element(cards){
var tmp_elist = super.get_element_list();
var last_element = tmp_elist[tmp_elist.length-1]
console.log(last_element, this.stack)
if (this.stack.size()==1){
tmp_elist = [];
for (var i=0; i<cards.length; i++){
tmp_elist.push(new CardView(true, last_element.ox, last_element.oy, cards[i], 180, 270))
}
var ptmp_elist = [];
super.update_element([]);
ptmp_elist.push(new CardView(true, last_element.ox, last_element.oy, cards, 180, 270))
super.update_element(ptmp_elist);
}
else {
for (var i=0; i<cards.length; i++){
tmp_elist.push(new CardView(true, last_element.ox, last_element.oy+30, cards[i], 180, 270))
}
tmp_elist.push(new CardView(true, last_element.ox, last_element.oy+30, cards, 180, 270))
super.update_element(tmp_elist)
}
super.update_element(tmp_elist);
this.resize(this.scale);
console.log(super.get_element_list())
(super.get_element_list())
}
is_won(){
var won = false;
if (this.stack.size()==0){
won = true
}
return won
}
}
@@ -578,7 +625,7 @@ class InputMgr {
this.cur_view_arr = cur_view_arr;
this.update_element_list();
this.last_sel = null;
console.log(this.cur_element_arr);
(this.cur_element_arr);
//0==not moved 1==just moved 2==moved and have new selection
this.moved = 0;
}
@@ -586,20 +633,20 @@ class InputMgr {
update_element_list(){
var tmp_arr = [];
this.cur_id_arr = [];
console.log(this.cur_view_arr[0])
(this.cur_view_arr[0])
for (var i=0; i<this.cur_view_arr.length;i++){
for (var j=0; j<this.cur_view_arr[i].get_element_list().length;j++){
tmp_arr.push(this.cur_view_arr[i].get_element_list()[j])
this.cur_id_arr.push(this.cur_view_arr[i].id);
}
}
console.log(tmp_arr, this.cur_id_arr);
(tmp_arr, this.cur_id_arr);
this.cur_element_arr = tmp_arr
}
draw_stock(){
var card = this.cur_view_arr[7].draw();
console.log(this.cur_view_arr)
(this.cur_view_arr)
var retlist = this.cur_view_arr[12].add(card, this.scale);
if(retlist){
this.cur_view_arr[7].on_receive(retlist);
@@ -609,7 +656,7 @@ class InputMgr {
on_click(x,y){
//update element list to insure up to date Positions
this.update_element_list();
// console.log(this)
// (this)
var matched_obj = {};
//determine if moved
if (this.moved == 1){
@@ -651,14 +698,33 @@ class InputMgr {
last_view = this.cur_view_arr[i];
}
}
console.log(view, this.last_sel)
(view, this.last_sel)
//peek first, if legal the draw
var card = last_view.peek();
console.log(card);
if (view.is_legal(card)){
card = last_view.draw();
view.add([card]);
var substack = last_view.substack(this.last_sel.obj.card);
var card;
console.log(substack)
if (view.is_legal(this.last_sel.obj.card)){
if (substack != 0){
card = [];
for (var i=0; i<=substack; i++){
//insure last drawed card endup first
card.unshift(last_view.draw());
}
//if single card
} else {
card = [last_view.draw()]
console.log(card)
}
console.log(card);
for (var single of card){
(single);
view.add(single);
}
}
//after moving, set the flag to true
this.moved +=1;
//upon change update the list
@@ -669,15 +735,12 @@ class InputMgr {
}
}
if(this.last_sel){
console.log(matched_obj.parent_id, this.last_sel.parent_id);
}
(matched_obj.obj.card)
if ((matched_obj && this.last_sel != null || this.moved !=1)||this.last_sel.parent_id == "stock" && matched_obj.parent_id == "waste"){
this.last_sel = matched_obj;
}
return matched_obj;
}
resize(scale){
@@ -736,14 +799,34 @@ class KlondikeGame {
constructor (){
//intialise views
this.init_views();
console.log("initialised views");
("initialised views");
//grab context for render manager
this.start();
}
pass_click(x,y){
var cur_sel = this.#imgr.on_click(x,y);
console.log("Selected parent stack:"+cur_sel.parent_id)
this.is_won()
}
//don't have time to do a win screen
is_won(){
var tmp_view = this.#tableau
tmp_view.concat(this.#foundations)
var won
for (var view of tmp_view){
if (view.is_won() && won){
won = true;
} else {
won = false;
}
}
if (won){
alert("YOU WIN!")
}
}
start(){
this.#ctx = document.getElementById("canvas").getContext("2d");
@@ -755,7 +838,7 @@ class KlondikeGame {
this.#mgr.set_view(tmp_view.concat(this.#tableau, this.#stock_pile, this.#foundations, this.#waste_pile));
var tmp_no_bg = [];
this.#imgr = new InputMgr(tmp_no_bg.concat(this.#tableau, this.#stock_pile, this.#foundations, this.#waste_pile));
console.log(tmp_view);
(tmp_view);
}
//update scale modifier, however only currently fixed to 16:9 aspect ratio.
//all values calculated from modifier * 1920, 1080
@@ -780,16 +863,17 @@ class KlondikeGame {
var tmp_tableau = new Array()
var tmp_tableau_list = new Array()
//deal and populate the columns, in the temporary array
for (var j = 1; j<8; j++){
for (var j = 0; j<7; j++){
tmp_tableau.push(new Stack())
for (var k = j; k>0; k--){
tmp_tableau[j-1].push(this.#deck.drawCard());
for (var k = j+1; k>0; k--){
tmp_tableau[j].push(this.#deck.drawCard());
}
console.log(tmp_tableau[j])
}
//serialise it to array
for (var j = 1; j<8; j++){
tmp_tableau_list.push(tmp_tableau[j-1].to_array())
for (var j = 0; j<7; j++){
tmp_tableau_list.push(tmp_tableau[j].to_array())
}
var tmp_tableau_element_list = new Array();
@@ -803,12 +887,14 @@ class KlondikeGame {
//this current list is a 2d array
for (var h=0; h<7;h++){
var tmp_list = new Array()
for (var i=0;i<tmp_tableau_list[h].length;i++){
console.log(h)
for (var i=0;i< tmp_tableau_list[h].length;i++){
//if last card, change the image to reveal
if (i+1 == tmp_tableau_list[h].length) {
tmp_list.push(new CardView(true, x,y,tmp_tableau_list[h][i], dx, dy));
console.log(tmp_tableau_list[h][i])
}
else if (i+1 != tmp_tableau_list[h].length) {
else if (i != tmp_tableau_list[h].length) {
tmp_list.push(new CardView(false, x,y,tmp_tableau_list[h][i], dx, dy));
}
y+=30
@@ -851,11 +937,14 @@ class KlondikeGame {
}
/*unfortunately because weird things will happen to the canvas once reset this way,
I've bound the reset button to refresh page, uncommenting below and commenting
the refresh statement will reveal the outcome */
reset(){
var tmp_view = [new View([new Background()])];
this.init_views();
this.start();
// var tmp_view = [new View([new Background()])];
// this.init_views();
// this.start();
location.reload()
}
}